<template>
	<view>
		<!-- 评论部分 -->
		<view class="comment">
			
			<view class="comment-item">
				
				<view class="comment-item-top flex-no-horizontal">
					
					<view class="comment-item-top-left flex-no-horizontal">
						<image :src="record.avatar" class="comment-item-top-left-portrait" @click="toUserInfo"></image>
						<view class="comment-item-top-left-name flex-no-horizontal">
							<view>{{record.username}}</view>
							<!-- <image src="../../../static/logo.png" mode=""></image> -->
						</view>
					</view>
					
					<view class="comment-item-bottom-head flex-no-horizontal">
						<!-- <view class="comment-item-bottom-head-more">
							<u-icon name="more-dot-fill" color="#F0F0F0" size="28"></u-icon>
						</view> -->
					</view>
					
				</view>
				
				<view class="comment-item-bottom">
					
					<view class="comment-item-bottom-text">
						{{record.content}}
					</view>
					
					<view class="comment-item-bottom-bottom flex-no-horizontal">
						
						<view class="comment-item-bottom-bottom-time">
							{{record.createdAt | timeFrom(false)}}
						</view>
						
						<!-- <view class="comment-item-bottom-bottom-time flex-no-horizontal">
							<u-icon name="thumb-up" :color=" ifLike ? 'rgba(74, 188, 90, 1)' :'#F0F0F0'" size="28"></u-icon>
							<view>23</view>
						</view> -->
						
					</view>
					
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			record: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		data() {
			return {
				ifLike:false
			};
		},
		computed: {
			
		},
		onLoad() {
			
		},
		methods: {
			
			toUserInfo(){
				uni.navigateTo({
					url:'./userInfo?userId=' + this.record.userId
				})
			},
			
		},
	};
</script>

<style lang="scss">
	.comment{
		margin-top: 60rpx;
		
		.comment-head{
			margin-bottom: 60rpx;
			justify-content: space-between;
			
			.comment-head-left{
				color: rgba(143, 144, 145, 1);
				font-size: $uni-font-size-base;
				text{
					margin-left: 20rpx;
				}
			}
			
			.comment-head-right{
				justify-content: space-around;
				width: 182rpx;
				height: 54rpx;
				background-color: rgba(247, 247, 247, 1);
				border-radius: 27rpx;
				font-size: 22rpx;
				color: rgba(179, 180, 181, 1);
				
				.comment-head-right-hot{
					height: 100%;
					width: 88rpx;
					justify-content: center;
					background-color: #FFFFFF;
					border-radius: 27rpx;
					color: $uni-color-black;
				}
				.comment-head-right-new{
					background-color: transparent;
					justify-content: center;
					color: rgba(179, 180, 181, 1);
				}
				
			}
			
		}
		
		.comment-item{
			
			.comment-item-top{
				justify-content: space-between;
				
				.comment-item-top-left{
					
					.comment-item-top-left-portrait{
						width: 80rpx;
						height: 80rpx;
						border-radius: $uni-border-radius-circle;
						margin-right: 20rpx;
					}
					
					.comment-item-top-left-name{
						font-size: $uni-font-size-lg;
						color: $uni-color-black;
						font-weight: bold;
						image{
							width: 34rpx;
							height: 34rpx;
							margin-left: 20rpx;
							border-radius: $uni-border-radius-circle;
						}
					}
					
				}
				
			}
			
			.comment-item-bottom{
				
				.comment-item-bottom-text{
					color: rgba(58, 58, 58, 1);
					font-size: $uni-font-size-lg;
					line-height: 56rpx;
					margin: 20rpx 0;
					word-break: break-all;
				}
				
				.comment-item-bottom-bottom{
					justify-content: space-between;
					
					.comment-item-bottom-bottom-time{
						color: rgba(179, 180, 181, 1);
						font-size: $uni-font-size-sm;
					}
					
				}
				
			}
			
		}
		
	}
</style>
